<template>
  <div class="container">
    <!-- 关闭按钮 -->
    <img :src="ImgBaseUrl+'/mp_3.1.6/关闭按钮/安卓/ic_shut.png'"
         v-if="ImgBaseUrl"
         alt
         class="close-btn"
         @tap="closeMask" />
    <!-- 标题 -->
    <h2 class="model-title">金币兑换银币</h2>
    <div class="desc">当前钱包金币{{count_gold}}，请输入想兑换的金币，兑换成功后无法撤销。</div>
    <ul class="action-bar">
      <li class="action-item clearfix">
        <div class="action-l gold">
          <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
               v-if="ImgBaseUrl"
               alt
               class="icon" />
          金币
        </div>
        <div class="action-r">
          <input type="number"
                 class="inp disabled"
                 v-model="gold"
                 placeholder="0" />
        </div>
      </li>
      <li class="action-item clearfix">
        <div class="action-l gray">
          <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
               v-if="ImgBaseUrl"
               alt
               class="icon" />
          银币
        </div>
        <div class="action-r">
          <input type="number"
                 class="inp"
                 disabled
                 v-model="silver"
                 placeholder="0" />
        </div>
      </li>
    </ul>
    <!-- 兑换按钮 -->
    <div class="exchange-btn"
         @tap="show_check_model()">确认兑换</div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      // 银币
      silver: "",
      // 金币
      gold: ""
    };
  },
  methods: {
    closeMask () {
      this.$emit("closeMask");
    },
    // 获取验证码弹框
    show_check_model () {
      if (this.gold == "" || this.gold == 0) {
        wx.showToast({
          title: "请输入想兑换的金币", //提示的内容,
          icon: "none", //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
      } else {
        this.$emit("show_check_model", 1, this.gold);
      }
    }
  },
  watch: {
    gold (newVal, oldVal) {
      if (newVal.startsWith("0")) {
        this.gold = "";
      } else if (newVal - 0 > this.count_gold) {
        this.gold = this.count_gold + "";
      }
      this.silver = newVal * 5;
    }
  },
  props: ["count_gold"]
};
</script>

<style lang="less" scoped>
.container {
  width: 335px;
  height: 240px;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  position: fixed;
  top: 212px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 20px 0;
  box-sizing: border-box;
  .close-btn {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .model-title {
    font-size: 18px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 25px;
    position: relative;
  }
  .desc {
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 18px;
    margin-top: 6px;
  }
  .action-bar {
    margin-top: 31px;
    .action-item {
      .action-l {
        float: left;
        height: 22px;
        .icon {
          width: 18px;
          height: 18px;
          display: inline-block;
          vertical-align: middle;
          margin-bottom: 2px;
        }
        &.gold {
          font-size: 16px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(245, 208, 64, 1);
          line-height: 22px;
        }
        &.gray {
          font-size: 16px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(190, 204, 206, 1);
          line-height: 22px;
        }
      }
      .action-r {
        float: right;
        .inp {
          width: 101px;
          height: 24px;
          border-radius: 5px;
          font-size: 14px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 24px;
          background: #fff;
          text-align: center;
          &.disabled {
            background: rgba(243, 244, 246, 1);
          }
        }
      }
      &:nth-of-type(2) {
        margin-top: 16px;
      }
    }
  }
  .exchange-btn {
    width: 295px;
    font-size: 14px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    font-weight: bold;
    border-top: 1px solid rgba(245, 245, 245, 1);
    line-height: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>